<template>
 <div>
 <div align="center">
    <form name="form1" action="" method="" target="">
      <div style="display:none;">&nbsp;</div>
      <table class="content_report" border="0" cellpadding="0" cellspacing="0">
        <thead>
          <tr>
            <td align="center">
              <br>
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tbody>
                  <tr>
                    <td width="160" class="reportSmallNormal">&nbsp;</td>
                    <td align="center" style="font-family:Arial;font-size:12pt;font-weight:bold;">
                      <div>供應商資料報表</div>
                    </td>
                    <td width="200" class="reportSmallNormal" align="right">
                      <div>列印日期: {{ time }}</div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <br>
            </td>
          </tr>
          <tr>
            <td align="center">
              <table border="0" cellpadding="2" cellspacing="0">
                <tbody>
                  <tr>
                    <!-- <td class="reportSmallNormal" align="left" valign="top">加入日期:</td>
                    <td class="reportSmallNormal" align="left" valign="top">
                      {{ obj.time && obj.time.length > 1 ?
                          `${obj.time[0]}至${obj.time[1]}` : `所有`
                      }}
                    </td> -->
                    <td width="20" class="reportSmallNormal" align="left" valign="top"></td>
                    <td class="reportSmallNormal" align="left" valign="top">狀態:</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ obj.status == 1 ? '有效' : obj.status == -1 ? '無效' :'所有'  }}</td>
                    <!-- <td width="20" class="reportSmallNormal" align="left" valign="top"></td>
                    <td class="reportSmallNormal" align="left" valign="top">學生總數:</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ total }}</td>
                    <td width="20" class="reportSmallNormal" align="left" valign="top"></td> -->
                    <!-- <td class="reportSmallNormal" align="left" valign="top">課程總數:</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ course_total }}</td> -->
                  </tr>
                </tbody>
              </table>
              <br>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td align="center">
              <table width="1500" border="0" cellpadding="2" cellspacing="0" style="table-layout:fixed;">
                <colgroup>
                  <col width="100"><!-- 狀態 -->
                  <col width="100"><!-- 名稱 -->
                  <col width="125"><!-- 聯絡人 -->
                  <col width="100"><!-- 公司電話 -->
                  <col width="125"><!-- 傳真電話 -->
                  <col width="200"><!-- 地址 -->
                  <col width="100"><!-- 備注 -->
                </colgroup>
                <thead>
                  <tr>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">狀態</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">名稱</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">聯絡人</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">公司電話</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">傳真號碼</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">地址</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">備註</td>
                  </tr>
                </thead>
                <tbody v-for="(item, index) in list" :key="index">
                  <tr>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.status == 1 ? '有效' :'無效' }}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.name }}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.contact }}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.mobile }}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.fax }}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.address }} </td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.remark }}</td>

                  </tr>
 
                </tbody>
              </table>
            </td>
          </tr>
          <tr>
            <td align="center">
              <br>
              <span class="reportSmallNormal">*** 報表完 ***</span>
            </td>
          </tr>
          <tr>
            <td align="center">&nbsp;</td>
          </tr>
  
        </tbody>
      </table>
    </form>
  </div>
 </div>
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {getTime} from '@/common/function.js'
const time = ref('')


const props = defineProps({
    list:Object,
    obj:Object,
})
const tableData = ref([])
const obj = ref([])
tableData.value = props.list
obj.value = props.obj

onMounted(() => {
    time.value = `${getTime().nowDate} ${getTime().nowTime}`
})
</script>

<style scoped lang='less'>
thead {
  display: table-header-group;
}

tfoot {
  display: table-footer-group;
}

.reportSmallBoldNormal {
  font-family: Arial;
  font-size: 8pt;
  font-weight: bold;
}

.reportSmallNormal {
  font-family: Arial;
  font-size: 8pt;
}
</style>